<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/yoyoga.css" media="all"/>
    <script src="http://cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script>
    <script src="/layui/layui.js"></script>
</head>
<body>

<div class="main-content-container" id="trainerInfo">
    <!-- 合约详情-->
    <div class="contract-detail-container">
        <p th:text="${contractData}"></p>
    </div>
    <div class="contract-detail-container" id="contractDeal">
        <div>
            <button class="layui-btn contract-detail-button" onclick="dealContract('1')">同意</button>
        </div>
        <div>
            <button class="layui-btn layui-btn-primary contract-detail-button" onclick="dealContract('2')">拒绝</button>
        </div>
    </div>
    <div class="contract-detail-container" id="contractFinish">
        <div>
            <button class="layui-btn contract-detail-button" onclick="dealContract('3')">结束合约</button>
        </div>
    </div>
    <div class="contract-detail-container layui-tab" id="orderListEle">
        <ul class="layui-tab-title" style="width: 100%;">
            <li class="layui-this" onclick="showOrder(0,'ordertListWait')">待支付</li>
            <li onclick="showOrder(1,'ordertListFinished')">已完成</li>
        </ul>
        <div class="layui-tab-content"  style="width: 100%;">
            <div class="layui-tab-item layui-show" id="ordertListWait"></div>
            <div class="layui-tab-item" id="ordertListFinished"></div>
        </div>
    </div>
</div>



<script>
    layui.use('element', function() {
        var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
        //监听导航点击
        element.on('nav(demo)', function(elem) {
            //console.log(elem)
            layer.msg(elem.text());
        });
    });
</script>

<script th:inline="javascript">
    var contractData = [[${contractData}]]; //获取
    var contractJson = eval('(' + contractData + ')'); //转换成json对象
    var conTractId = contractJson.contract.cId;

    //展示订单
    function showOrder(oState,id){
        layui.use('flow', function() {
            var flow = layui.flow;
            flow.load({
                elem: '#'+id, //流加载容器
                done: function(page, next) { //执行下一页的回调
                    var lis = [];
                    var orderState;
                    $.ajax({
                        url:"/order/findOrders",
                        type:"post",
                        dataType:"json",
                        data:{
                            "page":page,
                            "cId":conTractId,
                            "oState":oState
                        },
                        success:function(res){
                            layui.each(res.orders,function (index, item) {
                                orderState = orderStateName(oState, item.oId);
                                lis.push(
                                    '<div class="mytrainer-card">'
                                    +'<div class="mytrainer-card-left">'
                                    +'<div class="mytrainer-card-gym-trainer">'
                                    +'<p>订单号:'+item.oNum+'</p>'
                                    +'</div>'
                                    +'<div class="mytrainer-card-gym-trainer">'
                                    +'课时费：'+item.oBanlance
                                    +'</div>'
                                    +'<div class="mytrainer-card-gym-trainer">'
                                    +'订单产生时间'+item.oCreatetime
                                    +'</div>'
                                    +'</div>'
                                    +'<div class="mytrainer-card-right">'
                                    +'<div>'+orderState+'</div>'
                                    +'</div>'
                                    +'</div>'
                                )
                            });
                            next(lis.join(''), page < res.total);
                        }
                    })

                }
            });
        });
    }

    function orderStateName(state,oId){
        switch (state) {
            case 0:
                return '<button class="layui-btn" onclick="payOrder('+oId+')">去支付<button>';
            case 1:
                return "已完成";
        }
    }

    //设置同意拒绝按钮的可见性：只有合同处于待处理状态，且当前登陆用户为教师时才可见
    //设置订单列表的可见性：只有合同处于进行中和已结束时才可见
    //设置结束合约的按钮，只有当合同处于进行中状态，且当前登录用户为学生时才可见
    $(function () {
        var cState = contractJson.contract.cState;  //合同状态
        var userType = [[${session.userType}]]; //用户类型
        if(cState=='0'&&userType=='1'){
            $("#contractDeal").show();
        }else{
            $("#contractDeal").hide();
        }
        if(cState=='1'||cState=='3'){
            $("#orderListEle").show();
        }else{
            $("#orderListEle").hide();
        }
        if(cState=='1'&&userType=='0'){
            $("#contractFinish").show();
        }else{
            $("#contractFinish").hide();
        }
    })
    
    
    //更新合约状态
    function dealContract(cstate) {
        $.ajax({
            url:"/contract/update",
            type:"post",
            data:{
                "cId":conTractId,    //设置合约ID
                "cState":cstate    //设置合约状态
            },
            success:function (data) {
                if(data.result=='success'){
                    if(cstate==3){
                        alert("合约已结束，保证金已退还到您的账户余额");
                    }else{
                        alert("更新成功！");
                    }
                    window.location.href="/html/myStudent.html";
                }else {
                    alert("服务器出错，请重试");
                }
            }
        })
    }

    //支付订单
    function payOrder(oId) {
        $.ajax({
            url:"/order/payOrder",
            data:{
                "oId":oId
            },
            success:function (data) {
                if(data.result=='success'){
                    alert("支付成功,请重新进入该页面查看");
                    window.location.href="/html/myTrainer.html"
                }else{
                    alert(data.reason);
                }
                
            }
        })
    }

    $(function () {
        showOrder(0,"ordertListWait");
    })


</script>


</body>
</html>
